﻿<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <title>制造工业</title>

    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="format-detection" content="telephone=no">
    <meta name="renderer" content="webkit">
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
    <meta http-equiv="Cache-Control" content="no-siteapp" />
    <link rel="alternate icon" type="image/png" href="images/favicon.png">
    <link rel='icon' href='favicon.ico' type='image/x-ico' />
    <meta name="description" content="" />
    <meta name="keywords" content="" />
    <link rel="stylesheet" href="css/default.min.css?t=227" />
    <!--[if (gte IE 9)|!(IE)]><!-->
    <script type="text/javascript" src="lib/jquery/jquery.min.js"></script>
    <!--<![endif]-->
    <!--[if lte IE 8 ]>
<script src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
<script src="http://cdn.staticfile.org/modernizr/2.8.3/modernizr.js"></script>
<script src="lib/amazeui/amazeui.ie8polyfill.min.js"></script>
<![endif]-->
<script type="text/javascript" src="lib/handlebars/handlebars.min.js"></script>
<script type="text/javascript" src="lib/iscroll/iscroll-probe.js"></script>
<script type="text/javascript" src="lib/amazeui/amazeui.min.js"></script>
<script type="text/javascript" src="lib/raty/jquery.raty.js"></script>
<script type="text/javascript" src="js/main.min.js?t=1"></script>

<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.slim.js"></script>
<script type="text/javascript" src="js/common.js?v=1.0"></script>
</head>

<body>
    <header class="header">
        <div class="header-container">
            <div class="header-div pull-left">
                <a class="header-logo">
                    <img src="images/logo.png" />
                </a>
                <button class="am-show-sm-only am-collapsed font f-btn" data-am-collapse="{target: '.header-nav'}">&#xe68b;</button>
            </div>


            <nav>
                <ul class="header-nav am-collapse">
                    <li>
                        <a href="index.html">首页</a>
                    </li>
                    <li>
                        <a href="about.html">关于我们</a>
                    </li>
                    <li class="on">
                        <a href="product_list.html">产品中心</a>
                    </li>
                    <li>
                        <a href="new_list.html">新闻动态</a>
                    </li>
                    <li>
                        <a href="case_list.html">产品应用</a>
                    </li>
                    <li>
                        <a href="contact.html">联系我们</a>
                    </li>
                </ul>
                <div class="header-serch  am-hide-md-down">
                    <input type="text" name="name" value="" />
                    <em class="font">&#xe632;</em>
                </div>
            </nav>


        </div>
    </header>
    <div class="com-banner">
        <img src="images/index_banner.jpg" />
    </div>
    <div class="com-container">
        <div class="cms-g">
            <div class="am-hide-sm-only am-u-md-3 am-u-lg-3">
                <div class="com-nav-left">
                    <h1>
                        <em>产品中心</em>
                        <i>PRODUCT</i>
                    </h1>
                    <ul>
                        <li class="on" data-classify="product1">
                            <a href="#">自动售货机（单电机）</a>
                        </li>
                        <li data-classify="product2">
                            <a href="#">自动售货机（双电机）</a>
                        </li>
                        <li data-classify="product3">
                            <a href="#">物联网</a>
                        </li>
                        <li data-classify="product4">
                            <a href="#">勤美纸巾</a>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="am-u-sm-12 am-u-md-9 am-u-lg-9">
                <div class="com-nav-title">
                    <a href="#doc-oc-demo1" class="font am-show-sm-only" data-am-offcanvas>&#xe68b;</a>
                    <span>产品列表</span>
                </div>
                <div class="com-nav-category product1">
                    <ul>
                        <li class="on">
                            <span>
                                <a href="#">多货道单电机</a>
                            </span>
                        </li>
                    </ul>
                </div> 
                <div class="com-nav-category product2" hidden>
                    <ul>
                        <li class="on">
                            <span>
                                <a href="#">多货道双电机</a>
                            </span>
                        </li>
                    </ul>
                </div>
                <div class="com-nav-category product3" hidden>
                    <ul>
                        <li class="on">
                            <span>
                                <a href="#">物联网</a>
                            </span>
                        </li>
                    </ul>
                </div>
                <div class="com-nav-category product4" hidden>
                    <ul>
                        <li class="on">
                            <span>
                                <a href="#">勤美纸巾</a>
                            </span>
                        </li>
                    </ul>
                </div>
                <div class="product-list product1">
                    <div class="am-u-sm-6 am-u-md-4 am-u-lg-3">
                        <div class="product-list-item">
                            <div class="product-list-item-bj">
                                <a href="./product_info.html">
                                    <img src="images/product_01.jpg" />
                                </a>
                            </div>
                            <div class="product-list-item-title">
                                <a href="./product_info.html" class="f-toe">CM-301</a>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="product-list product2" hidden>
                    <div class="am-u-sm-6 am-u-md-4 am-u-lg-3">
                        <div class="product-list-item">
                            <div class="product-list-item-bj">
                                <a href="./product_info.html">
                                    <img src="images/product_02.jpg" />
                                </a>
                            </div>
                            <div class="product-list-item-title">
                                <a href="./product_info.html" class="f-toe">CM-402</a>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="product-list product3" hidden>
                    <div class="am-u-sm-6 am-u-md-4 am-u-lg-3">
                        <div class="product-list-item">
                            <div class="product-list-item-bj">
                                <a href="./product_info.html">
                                    <img src="images/product_03.jpg" />
                                </a>
                            </div>
                            <div class="product-list-item-title">
                                <a href="./product_info.html" class="f-toe">物联网</a>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="product-list product4" hidden>
                    <div class="am-u-sm-6 am-u-md-4 am-u-lg-3">
                        <div class="product-list-item">
                            <div class="product-list-item-bj">
                                <a href="./product_info.html">
                                    <img src="images/product_04.jpg" />
                                </a>
                            </div>
                            <div class="product-list-item-title">
                                <a href="./product_info.html" class="f-toe">勤美纸巾</a>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="page-list" style="
                position:  absolute;
                padding:  20%;
                ">
                <a href="#">
                    <<</a>
                    <a href="#">
                        <</a>
                        <a href="#" class="num">1</a>
                        <a href="#" class="num">2</a>
                        <a href="#" class="num">3</a>
                        <a href="#" class="on">4</a>
                        <a href="#" class="num">5</a>
                        <a href="#" class="num">6</a>
                        <a href="#">></a>
                        <a href="#">>></a>
                    </div>
                </div>
            </div>
        </div>


        <footer>
            <div class="cms-g">
                <div class="footer">
                    <ul>
                        <li>
                            <a href="#">
                                <span>网站地图</span>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <span>访问统计</span>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <span>友情链接</span>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <span>法律申明</span>
                            </a>
                        </li>
                    </ul>
                    <span style="color:#fff;">
                        <a href="http://www.haothemes.com/" target="_blank" title="勤台">上海勤台自动化设备有限公司 沪ICP备xxxxxxx号</a>
                    </span>
                </div>
            </div>
        </footer>
        <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.slim.js"></script>
        <script src="https://cdn.bootcss.com/jquery-cookie/1.4.1/jquery.cookie.js"></script>
        <script>
            $("div.com-nav-left li").click(function(event) {
                /* Act on the event */
                $(this).siblings().removeClass('on');
                $(this).addClass('on');
                $("div.com-nav-category").hide();
                $("div.product-list").hide();
                switch($(this).attr("data-classify")){
                    case "product1":$("div.product1").show();break;
                    case "product2":$("div.product2").show();break;
                    case "product3":$("div.product3").show();break;
                    case "product4":$("div.product4").show();break;
                }
            });
        </script>
    </body>

    </html>